<template>
  <div class="h-full flex flex-col bg-#FAF9F9">
    <div class="z-1">
      <img src="https://jwc-static.jdwxk.com/imgs/mall/bg2.png" class="absolute w-full">
      <div class="absolute right-4 top-4 flex items-center gap-1" @click="showRuleDescription = true">
        <img src="https://jwc-static.jdwxk.com/imgs/mall/book.png" class="h-3">
        <span class="text-nowrap text-3 text-#666666">规则说明</span>
      </div>
      <div class="absolute left-10 top-13 flex items-start gap-1" @click="handleGotoDetail">
        <img src="https://jwc-static.jdwxk.com/imgs/mall/star.png" class="w-10">
        <div class="flex items-center gap-1">
          <span class="text-7 font-600 leading-none">{{ userInfo.score }}</span>
          <img src="https://jwc-static.jdwxk.com/imgs/mall/arrow-right.png" class="w-2">
        </div>
      </div>
    </div>
    <div class="left-0 right-0 z-1 m-b-7 m-t-35 overflow-y-auto p-x-4">
      <div v-if="loading" class="absolute inset-0 flex items-center justify-center">
        <van-loading type="spinner" color="#F7580A" />
      </div>
      <wc-flow-layout v-else :gap="10" :cols="2">
        <GoodsBox v-for="item in goodsData" :key="item.id" :data="item" />
      </wc-flow-layout>
    </div>
    <RuleDescription v-model:show="showRuleDescription" />
  </div>
</template>

<script lang='ts' setup>
import GoodsBox from './GoodsBox/index.vue'
import RuleDescription from './RuleDescription/index.vue'
import type { IGoodsData } from '@/api/mall/types'
import { getGoodsPage } from '@/api/mall'
import { useUserStoreWidthOut } from '@/store/modules/user'

const router = useRouter()
function handleGotoDetail() {
  router.push('/points-detail')
}

const showRuleDescription = ref(false)
const goodsData = ref<IGoodsData[]>([])
const userStore = useUserStoreWidthOut()
const userInfo = computed(() => userStore.getUserInfo)
const loading = ref(true)
async function getData() {
  try {
    const res = await getGoodsPage({
      page: 1,
      size: 10,
    })
    goodsData.value = res.data.records
  }
  finally {
    loading.value = false
  }
}

getData()
</script>

<style lang='less' scoped>
</style>
